import CKEditor from "@ckeditor/ckeditor5-vue";
import { DecoupledEditor } from "@ckeditor/ckeditor5-editor-decoupled";
import { Paragraph } from '@ckeditor/ckeditor5-paragraph' // 段落插件
import { Essentials } from '@ckeditor/ckeditor5-essentials' // 基本功能插件
import {
    Bold, // 加粗
    Italic, // 斜体
    Strikethrough, // 删除线
    Underline, // 下划线
    Subscript, // 下标
    Superscript, // 上标
    Code // 行内代码
} from '@ckeditor/ckeditor5-basic-styles'
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote' // 块引用插件
import { FontSize, FontColor, FontBackgroundColor } from '@ckeditor/ckeditor5-font' // 字体大小插件
import { Alignment } from '@ckeditor/ckeditor5-alignment' // 文本对齐插件
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line' // 水平线插件
import { Heading, Title } from '@ckeditor/ckeditor5-heading'
import {
    TodoList, // 待办事项列表插件
    ListProperties, // 列表插件
} from '@ckeditor/ckeditor5-list'
import {
    Indent, // 缩进插件（列表）
    IndentBlock, // 缩进插件（块：段落，标题）
} from '@ckeditor/ckeditor5-indent'
import { CodeBlock } from '@ckeditor/ckeditor5-code-block' // 代码块插件
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace' // 查找替换插件
import {
    Table, // 表格插件
    TableToolbar, // 表格工具栏插件
    TableProperties, // 表属性插件
    TableCellProperties, // 单元格属性插件
    TableColumnResize, // 调整表列宽度插件
    TableCaption // 表标题插件
} from '@ckeditor/ckeditor5-table'
import { Link, LinkImage } from '@ckeditor/ckeditor5-link' // 链接插件
import { Autoformat } from '@ckeditor/ckeditor5-autoformat' // 自动格式转换插件
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format'  // 删除格式插件
import {
    Image, // 图像插件
    ImageToolbar, // 图像工具栏插件
    ImageTextAlternative, // 文本替换图像插件
    ImageCaption, // 图像标题插件
    ImageInsert, // 插入图像插件
    AutoImage, // 自动图像插件
    ImageResize, // 调整图像尺寸插件
    ImageStyle, // 图像样式插件
} from '@ckeditor/ckeditor5-image'
import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload' // 简单图像上传适配器插件

import '@ckeditor/ckeditor5-image/build/translations/zh-cn' // 图像插件中文简体语言包
import '@ckeditor/ckeditor5-remove-format/build/translations/zh-cn' // 删除格式插件中文简体语言包
import '@ckeditor/ckeditor5-link/build/translations/zh-cn' // 连接插件中文简体语言包
import '@ckeditor/ckeditor5-table/build/translations/zh-cn' // 表格插件中文简体语言包
import '@ckeditor/ckeditor5-find-and-replace/build/translations/zh-cn' // 查找替换插件中文简体语言包
import '@ckeditor/ckeditor5-code-block/build/translations/zh-cn' // 代码块插件中文简体他语言包
import '@ckeditor/ckeditor5-indent/build/translations/zh-cn' // 块缩进中文包
import '@ckeditor/ckeditor5-list/build/translations/zh-cn' // 列表插件中文简体语言包
import '@ckeditor/ckeditor5-heading/build/translations/zh-cn' // 标题插件中文简体语言包
import '@ckeditor/ckeditor5-horizontal-line/build/translations/zh-cn' // 水平线中文包
import '@ckeditor/ckeditor5-alignment/build/translations/zh-cn' // 文本对齐中文包
import '@ckeditor/ckeditor5-font/build/translations/zh-cn' // 字体中文语言包
import '@ckeditor/ckeditor5-block-quote/build/translations/zh-cn' // 块引用中文包
import '@ckeditor/ckeditor5-basic-styles/build/translations/zh-cn' // 简体中文
import 'ckeditor5/build/translations/zh-cn' // 中文包

// 注册编辑器标签
export const ckeditor5 = CKEditor.component;
// 编辑器的类型
export const editorType = DecoupledEditor;


// 可通过删除格式插件清楚链接格式的简单插件
function RemoveFormatLinks(editor) {
    editor.model.schema.setAttributeProperties('linkHref', {
        isFormatting: true // 标记 linkHref 文本属性是一个格式化属性
    })
}


// 编辑器的配置
export const editorConfig = {
    // 插件
    plugins: [
        Paragraph,
        Essentials,
        Bold, // 加粗
        Italic,  // 斜体
        Strikethrough, // 删除线
        Underline, // 下划线
        Superscript, // 上标
        Subscript, // 下标
        Code, // 行内代码
        BlockQuote, // 块引用插件
        FontSize, // 字体大小
        FontColor, // 字体色插件
        FontBackgroundColor, // 字体背景色
        Alignment, // 文本对齐
        HorizontalLine, // 水平线
        Heading, // 标题插件
        Title, // 文档标题插件
        TodoList, // 待办事项列表插件
        ListProperties, // 列表插件
        Indent, // 缩进插件（列表）
        IndentBlock, // 缩进插件（块：段落，标题）
        CodeBlock, // 代码块
        FindAndReplace, // 查找与替换
        Table, // 表格插件
        TableToolbar, // 表格工具栏插件
        TableProperties, // 表属性插件
        TableCellProperties, // 单元格属性插件
        TableColumnResize, // 调整表列宽度插件
        TableCaption, // 表标题插件
        Link, // 链接
        Autoformat, // 自动格式化
        RemoveFormat, // 移出格式（不包含链接）
        RemoveFormatLinks, // 移出链接格式
        Image, // 图像插件
        ImageToolbar, // 图像工具栏插件
        ImageTextAlternative, // 文本替换图像插件
        ImageCaption, // 图像标题插件
        ImageInsert, // 插入图像插件
        AutoImage, // 自动图像插件
        ImageResize, // 调整图像尺寸插件
        ImageStyle, // 图像样式插件
        LinkImage, // 图像链接
        SimpleUploadAdapter, // 简单图像上传适配器插件
    ],
    // 工具栏
    toolbar: [
        'undo', // 撤消
        'redo', // 重做
        'selectAll', // 全选
        "|",
        'bold', // 加粗
        'italic', // 斜体
        'strikethrough', // 删除线
        'underline', // 下划线
        'superscript', // 上标
        'subscript', // 下标
        'code', // 行内代码
        "|",
        'blockQuote', // 块引用
        'fontSize', // 字体大小
        'fontColor', // 字体颜色
        "fontBackgroundColor", // 字体背景色
        'alignment', // 文本对齐
        "HorizontalLine", // 水平线
        'heading', // 标题下拉框
        "|",
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'todolist', // 待办事项列表
        'outdent', // 减少缩进
        'indent', // 增加缩进
        'codeblock', // 代码块
        'findandreplace', // 查找替换
        'insertTable', // 插入表格
        'link', // 链接
        'removeFormat', // 删除格式
        'uploadImage', // 上传图像
        'insertImage', // 插入图像
    ],
    fontSize: {
        supportAllValues: true,
        options: [
            9,
            'default',
            17,
        ]
    },
    fontColor: {
        columns: 5, // 颜色展示的列数
        documentColors: 5, // 文档中使用的颜色数量
        colors: [
            { color: '#000000', label: '黑色' },
            { color: '#D8DAD9', label: '灰色' },
            { color: '#FFFFFF', label: '白色' },
            { color: '#DF2A3F', label: '红色' },
            { color: '#ED740C', label: '橘橙' },
            { color: '#ECAA04', label: '金盏黄' },
            { color: '#FBDE28', label: '柠檬黄' },
            { color: '#74B602', label: '绿色' },
            { color: '#1DC0C9', label: '青色' },
            { color: '#117CEE', label: '浅蓝' },
            { color: '#2F4BDA', label: '蓝色' },
            { color: '#601BDE', label: '紫色' },
            { color: '#D22D8D', label: '玫红' },
        ],
    },
    fontBackgroundColor: {
        columns: 5, // 颜色展示的列数
        documentColors: 5, // 文档中使用的颜色数量
        colors: [
            { color: '#000000', label: '黑色' },
            { color: '#D8DAD9', label: '灰色' },
            { color: '#FFFFFF', label: '白色' },
            { color: '#DF2A3F', label: '红色' },
            { color: '#ED740C', label: '橘橙' },
            { color: '#ECAA04', label: '金盏黄' },
            { color: '#FBDE28', label: '柠檬黄' },
            { color: '#74B602', label: '绿色' },
            { color: '#1DC0C9', label: '青色' },
            { color: '#117CEE', label: '浅蓝' },
            { color: '#2F4BDA', label: '蓝色' },
            { color: '#601BDE', label: '紫色' },
            { color: '#D22D8D', label: '玫红' },
        ],
    },
    title: {
        placeholder: '请输入文档标题',
    },
    placeholder: '请在此处输入文章内容',
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
            { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
            { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' },
        ]
    },
    table: {
        // 新建表格默认 1 行 1 列 为表头
        defaultHeadings: { rows: 1, columns: 1 },
        // 表工具栏（气球）
        contentToolbar: [
            'toggleTableCaption', // 打开/关闭表标题
            '|',
            'tableColumn', // 表列设置
            'tableRow', // 表行设置
            'mergeTableCells', // 合并单元格
            '|',
            'tableProperties', // 表属性
            'tableCellProperties', // 单元格属性
        ],
        // 表属性配置
        tableProperties: {
            // 边框颜色
            borderColors: [
                { color: '#000000', label: '黑色' },
                { color: '#262626', label: '深灰' },
                { color: '#D8DAD9', label: '灰色' },
                { color: '#FFFFFF', label: '白色' },
                { color: '#DF2A3F', label: '红色' },
                { color: '#ED740C', label: '橘橙' },
                { color: '#ECAA04', label: '金盏黄' },
                { color: '#FBDE28', label: '柠檬黄' },
                { color: '#74B602', label: '绿色' },
                { color: '#1DC0C9', label: '青色' },
                { color: '#117CEE', label: '浅蓝' },
                { color: '#2F4BDA', label: '蓝色' },
                { color: '#601BDE', label: '紫色' },
                { color: '#D22D8D', label: '玫红' }
            ],
            // 背景颜色
            backgroundColors: [
                { color: '#000000', label: '黑色' },
                { color: '#262626', label: '深灰' },
                { color: '#D8DAD9', label: '灰色' },
                { color: '#FFFFFF', label: '白色' },
                { color: '#DF2A3F', label: '红色' },
                { color: '#ED740C', label: '橘橙' },
                { color: '#ECAA04', label: '金盏黄' },
                { color: '#FBDE28', label: '柠檬黄' },
                { color: '#74B602', label: '绿色' },
                { color: '#1DC0C9', label: '青色' },
                { color: '#117CEE', label: '浅蓝' },
                { color: '#2F4BDA', label: '蓝色' },
                { color: '#601BDE', label: '紫色' },
                { color: '#D22D8D', label: '玫红' }
            ],
        },
        // 单元格属性配置
        tableCellProperties: {
            // 边框颜色
            borderColors: [
                { color: '#000000', label: '黑色' },
                { color: '#262626', label: '深灰' },
                { color: '#D8DAD9', label: '灰色' },
                { color: '#FFFFFF', label: '白色' },
                { color: '#DF2A3F', label: '红色' },
                { color: '#ED740C', label: '橘橙' },
                { color: '#ECAA04', label: '金盏黄' },
                { color: '#FBDE28', label: '柠檬黄' },
                { color: '#74B602', label: '绿色' },
                { color: '#1DC0C9', label: '青色' },
                { color: '#117CEE', label: '浅蓝' },
                { color: '#2F4BDA', label: '蓝色' },
                { color: '#601BDE', label: '紫色' },
                { color: '#D22D8D', label: '玫红' }
            ],
            // 背景颜色
            backgroundColors: [
                { color: '#000000', label: '黑色' },
                { color: '#262626', label: '深灰' },
                { color: '#D8DAD9', label: '灰色' },
                { color: '#FFFFFF', label: '白色' },
                { color: '#DF2A3F', label: '红色' },
                { color: '#ED740C', label: '橘橙' },
                { color: '#ECAA04', label: '金盏黄' },
                { color: '#FBDE28', label: '柠檬黄' },
                { color: '#74B602', label: '绿色' },
                { color: '#1DC0C9', label: '青色' },
                { color: '#117CEE', label: '浅蓝' },
                { color: '#2F4BDA', label: '蓝色' },
                { color: '#601BDE', label: '紫色' },
                { color: '#D22D8D', label: '玫红' }
            ],
        }
    },
    image: {
        toolbar: [
            'link', // 图像链接
            'imageTextAlternative', // 文本替换图像
            'toggleImageCaption', // 显示或隐藏图像标题
            '|',
            'imageStyle:inline', // 显示在文本行内
            'imageStyle:alignLeft', // 图像与文本包装在一起左对齐
            'imageStyle:alignRight', // 图像与文本包装在一起右对齐
            'imageStyle:side', // 图像侧边显示
            '|',
            'imageStyle:alignBlockLeft', // 块图像左对齐
            'imageStyle:alignBlockRight', // 块图像右对齐
            'imageStyle:alignCenter', // 图像居中对齐
            'imageStyle:block', // 块图像（居中）
        ]
    },
    simpleUpload : {
        uploadUrl: '/note-serve/ck/upload/pic'
    }
}

